import React, { useState, useCallback, useMemo } from "react";
import { globalContainer } from "@/user.InterfaceLayer/constants/styles/CommonStyles";
import ButtonAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Button.Atom";
import ButtonAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Button.Atom/enum";
import { resources } from "@/user.InterfaceLayer/constants/const";
import { useTranslation } from "react-i18next";
import TextAtom from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "@/user.InterfaceLayer/Libraries/UI_KIT/Atoms/Text.Atom/enum";

const PrivacyPage: React.FC = () => {
  const { t } = useTranslation();
  const PrivacyText = t("PrivacyPage.policyText", {
    returnObjects: true,
  }) as [];

  const [showFullText, setShowFullText] = useState(false);

  const toggleText = useCallback(() => {
    setShowFullText((prevShowFullText) => !prevShowFullText);
  }, []);

  const visiblePolicyText = useMemo(() => {
    return showFullText ? PrivacyText : PrivacyText.slice(0, 4);
  }, [PrivacyText, showFullText]);

  return (
    <div className={`${globalContainer} py-[80px]`}>
      <TextAtom
        type={TextAtomEnum.enum_h5}
        className="text-center font-bold leading-[20px] text-tiffany"
      >
        {t("PrivacyPage.subTitle")}
      </TextAtom>
      <TextAtom
        type={TextAtomEnum.enum_h1}
        className="text-center font-bold text-tiffany leading-[50px] mt-3 mb-5 uppercase"
      >
        {t("PrivacyPage.title")}
      </TextAtom>
      {visiblePolicyText.map((item, index) => (
        <TextAtom
          type={TextAtomEnum.enum_h4}
          className="font-light text-textColor"
          key={index}
        >
          {item}
        </TextAtom>
      ))}
      {!showFullText && (
        <div className="mx-auto w-[200px]">
          <ButtonAtom
            type={ButtonAtomEnum.enum_butButton}
            onClick={toggleText}
            className="mt-[40px] mt-4 text-blue-500 hover:text-blue-700 focus:outline-none"
          >
            {t("PrivacyPage.button")}
          </ButtonAtom>
        </div>
      )}
    </div>
  );
};

export default PrivacyPage;
